<script setup>
import { onBeforeRouteLeave, useRouter } from "vue-router"
import { onMounted, ref, watch } from "vue"
import Pre2Page from './Pre2Page.vue'
import Pre3Page from './Pre3Page.vue'
//第一个页面
var imageIndex = 1
const interval = 5000
const router = useRouter()
// onMounted(() => {

//   var select = document.querySelector('.right-select')
//   var list = document.querySelector('.right-list')
//   var first = list.firstChild.cloneNode()
//   var last = list.lastChild.cloneNode()
//   list.appendChild(first)
//   list.insertBefore(last, list.firstChild)
//   console.log(select)
//   list.style.transform = `translateX(-${imageIndex}00%)`
//   select.childNodes[imageIndex - 1].classList.add('right-select-point-active')
//   moveByInterval()
// })

// const onMove = () => {
//   const imageLength = 3;
//   var list = document.querySelector('.right-list')
//   var select = document.querySelector('.right-select')
//   // console.log(list)
//   select.childNodes[imageIndex - 1].classList.remove('right-select-point-active')
//   imageIndex++
//   if (imageIndex === imageLength + 1) {
//     imageIndex = 0
//     list.style.transform = `translateX(-${imageIndex}00%)`
//     list.style.transition = 'none'
//     list.clientHeight
//     imageIndex = 1
//     list.style.transition = '0.7s'
//     list.style.transform = `translateX(-${imageIndex}00%)`
//   }
//   else list.style.transform = `translateX(-${imageIndex}00%)`

//   list.style.transition = '0.7s'

//   select.childNodes[imageIndex - 1].classList.add('right-select-point-active')
// }

// const moveByInterval = () => {
//   setTimeout(() => {
//     //进入别的页面时，轮播图计时未停止，此时再onMove会抛异常
//     try {
//       onMove()
//     }
//     catch {
//       console.log('轮播图停止')
//       return
//     }
//     moveByInterval()
//   }, interval)
//   return
// }


const into = (query) => {
  router.push({ path: '/login',query:query })
}
const intoInfo = (query) => {
  router.push({ path: '/info',query:query })
}

</script>
<template>
  <div class="frame">
    <PreBox>
      <template #title>
        <h1 class="left-title">“双百行动”共建项目管理系统<br />
          <span class="left-title" style="color: #0166df;">深圳技术大学</span>
        </h1>
      </template>
      <template #background>
        <img src="../../assets/image/sztupp.jfif" class="frame-img">
      </template>
      <template #mid>
        <div class="btns">
          <div class="btn" @click="into({ name: 'sztu' })">进入系统</div>
          <!-- <div class="btn">查看学校基本情况</div> -->
        </div>
      </template>
    </PreBox>
    <PreBox>
      <template #title>
        <h1 class="left-title">“双百行动”共建项目管理系统<br />
          <span class="left-title" style="color: #0166df;">河源市连平县</span>
        </h1>
      </template>
      <template #background>
        <img src="../../assets/image/lianpingxian.jfif" class="frame-img">
      </template>
      <template #mid>
        <div class="btns">
          <div class="btn" @click="into({ name: 'lp' })">进入系统</div>
          <div class="btn" @click="intoInfo({ name: 'lp' })">查看县域基本情况</div>
        </div>
      </template>
    </PreBox>
    <PreBox>
      <template #title>
        <h1 class="left-title">“双百行动”共建项目管理系统<br />
          <span class="left-title" style="color: #0166df;">汕尾市陆河县</span>
        </h1>
      </template>
      <template #background>
        <img src="../../assets/image/luhe.jpg" class="frame-img">
      </template>
      <template #mid>
        <div class="btns">
          <div class="btn" @click="into({ name: 'lh' })">进入系统</div>
          <div class="btn" @click="intoInfo({ name: 'lh' })">查看县域基本情况</div>
        </div>
      </template>
    </PreBox>
  </div>
  <!-- <Pre2Page class="box1" :nowPage="nowPage" @change-page="handelChangePage"></Pre2Page>
  <Pre3Page class="box2" :nowPage="nowPage" @change-page="handelChangePage"></Pre3Page> -->
</template>


<style lang="scss" scoped>
.frame {
  height: 100vh;
  min-width: 100vw;
  display: flex;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  &-item {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
  }
  &-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.btn{
  width: 17rem;
  height: 3.4rem;
  border-radius: 0.3rem;
  background-color: transparent;
  color: #cecece;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  opacity: 0.8;
  font-weight: 600;
  text-shadow: 0 0 0.6rem #000;
  cursor:default;
  &:hover{
    opacity: 0.9;
    background-color: #bfbfbf;
    color: #484848;
    font-weight: 700;
    font-size: 1.6rem;
    text-shadow: none;
  }
}
.left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding-left: 80px;
  // background: linear-gradient(to right,#0243f777,#011d68f1);
  &-title {
    font-size: 4.2rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    position: relative;
    color: #fff;
    text-shadow: 0 0 20px #232323c9;
    white-space: nowrap;
  }

  &-info {
    width: 80%;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 22.06px;
    margin-bottom: 4rem;
    position: relative;
  }
}

$duration: 0.7s;

.erase {
  position: absolute;
  top: 0;
  left: 0;
  --p: 0%;
  background: linear-gradient(to right, #0000 var(--p), #fff var(--p));
  color: transparent;
  animation: erase $duration ease-in-out forwards;
  user-select: none;
}

@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@keyframes erase {
  to {
    --p: 100%;
  }
}

.right {
  $wid: 69.2rem;
  $hei: 37.04rem;
  width: $wid;
  height: $hei;
  right: 5%;
  top: 50%;
  transform: translateY(-55%);
  position: absolute;
  overflow: hidden;

  &-list {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    transition: 0.7s;
    .img {
      //position: absolute;
      //right: 0;
      height: 100%;
      object-fit: cover;
      margin: 0;
      width: 100%;
      //防止拖动图片
      pointer-events: none;
  
    }
  }

  &-select {
    position: absolute;
    bottom: 24%;
    right: calc($wid / 2 ) ;
    transform: translateX(-50%);
    width: 6rem;
    height: 2rem;
    background-color: rgba(#D8D8D8, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 21.4rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &-point {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background-color: rgba(214, 214, 214, 0.6);
      backdrop-filter: blur(10px);
      margin: 0 0.3rem;

      &-active {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
      }
    }

  }
}

.button {
  width: 16rem;
  height: 5.5rem;
  border-radius: 12.3rem;
  position: relative;
  transition: all 0.7s ease;
  backface-visibility: hidden;
  font-size: 1.8rem;

  &-face {
    position: absolute;
    background-color: #147AD6;

    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;

    z-index: 2;
  }

  &-back {
    transform: rotateY(180deg);
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;

    z-index: 1;
  }

  &-father {
    cursor: pointer;
  }

  &-father:hover & {
    transform: rotateY(180deg);
  }
}

.down{
  position: absolute;
  bottom: 3rem;
  left: 50%;
  font-size: 1.4rem;
  & i{
    font-size: 1.6rem;
    animation: down 1s ease-out infinite;
  }
}
@keyframes down{
  0%{
    transform: translateY(-0.2rem);
    opacity: 1;
  }
  100%{
    transform: translateY(0.6rem);
    opacity: 0;
  }
}
</style>